<template>
  <div class="search">
    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyword" @blur="keyWordSearch"></el-input>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "Search",
    data() {
      return {
        keyword: ''
      }
    },
    methods: {
      keyWordSearch() {
        if(this.keyword.trim()){
          this.$store.dispatch('searchBlogs', {keyword: this.keyword}).then(() => {
            this.$emit('init')
          })
        }else{
          this.$emit('getBlogs')
        }
      }
    },
    computed: {
      ...mapState(['blogs'])
    }
  }
</script>

<style scoped>
  .search {
    background: #181818;
    box-shadow: 0 1px 1px #3D3D3D, 0 -1px 1px #000;
    width: 300px;
    padding: 20px;
    margin-bottom: 20px;
  }
</style>